<template>
    <div>
       <div  style="color:#000000;">品类</div>
        <q-input
        v-model="categoryName"
        color="secondary"
        class="col-12"
        style="height:40px !important;"
        readonly
        anchor="bottom left">
          <template v-slot:append>
            <q-icon name="arrow_drop_down" ></q-icon>
          </template>
        </q-input>
        <p v-if="must" class="text-negative">该字段为必填字段</p>
        <q-popup-proxy
        class="row"
        :offset="[10, 10]"
        v-model="isshow">
          <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <q-input
             ref="filter"
             style="border:1px solid #4444;"
             class="col-12"
             placeholder='输入过滤的节点'
             v-model="filter">
              <template v-slot:append>
                <q-icon v-if="filter!==''" name="fa fa-times" class="cursor-pointer" @click="resetFilter"></q-icon>
              </template>
            </q-input>
          </div>
          <q-tree
          class="col-lg-8 col-md-8 col-sm-12 col-xs-12"
          ref="qtree"
          style=""
          :nodes="category"
          :tick-strategy="tickType"
          color="primary"
          :filter="filter"
          node-key="id"
          :ticked.sync="ticked"
          :selected.sync="selected"
          @update:ticked="tickeds"
          label-key="name"></q-tree>
        </q-popup-proxy>
    </div>
</template>

<script>
import { transformToTreeFormat } from 'src/utils/fns.js'
export default {
  data () {
    return {
      isshow: false,
      category: [],
      categoryName: '',
      must: false,
      ticked: [],
      selected: '',
      tickType: 'strict',
      filter: ''
    }
  },
  created () {
  },
  watch: {
    'isshow' () {
      if (this.isshow === false) {
        if (this.ticked.length === 1) {
          this.categoryName = this.$refs.qtree.getTickedNodes()[0].name
        } else {
          this.categoryName = ''
        }
        let categoryes = {}
        categoryes.categoryName = this.categoryName
        categoryes.categoryId = this.ticked[0]
        this.$emit('cate', categoryes)
      } else {
        this.getTree()
      }
    }
  },
  methods: {
    // 树过滤
    myFilterMethod (node, filter) {
      const filt = filter.toLowerCase()
      return node.name && node.name.toLowerCase().indexOf(filt) > -1 && node.toLowerCase().indexOf('(*)') > -1
    },
    resetFilter () {
      this.filter = ''
      this.$refs.filter.focus()
    },
    // 单选
    tickeds (ticked) {
      if (ticked.length > 1) {
        this.ticked = [ticked[1]]
      }
    },
    async getTree () {
      await this.$api({
        method: 'post',
        url: '/mdm/category/query',
        params: {
          categoryTypeId: 'de421fad3eaa4b16b236a30e0b4ce8d8'
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let datas = data
          let categorys = transformToTreeFormat(datas, 'id', 'parentId', 'children')
          this.category = categorys
        },
        errorCallback (err) {
          console.log('未处理的业务级error: ', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .scroll
    min-width 50vw !important
</style>
